<template>
  <footer class="bg-bg-secondary border-t border-border-color mt-16">
    <div class="max-w-[1200px] mx-auto px-8 pt-12 pb-8">
      <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-8 mb-8">
        <div>
          <h3 class="gradient-text text-2xl mb-2">DHL's Blog</h3>
          <p class="text-text-secondary text-sm">分享技术与生活的点滴</p>
        </div>

        <div>
          <h4 class="text-lg mb-4 text-text-primary">快速链接</h4>
          <div class="flex flex-col gap-3">
            <NuxtLink
              to="/"
              class="text-text-secondary no-underline transition-all duration-300 w-fit hover:text-[#667eea] hover:translate-x-1"
            >
              首页
            </NuxtLink>
            <NuxtLink
              to="/blog"
              class="text-text-secondary no-underline transition-all duration-300 w-fit hover:text-[#667eea] hover:translate-x-1"
            >
              博客
            </NuxtLink>
            <NuxtLink
              to="/resume"
              class="text-text-secondary no-underline transition-all duration-300 w-fit hover:text-[#667eea] hover:translate-x-1"
            >
              简历
            </NuxtLink>
          </div>
        </div>

        <div>
          <h4 class="text-lg mb-4 text-text-primary">联系方式</h4>
          <div class="flex flex-col gap-3">
            <a
              href="https://github.com"
              target="_blank"
              rel="noopener"
              class="text-text-secondary no-underline transition-all duration-300 w-fit hover:text-[#667eea] hover:translate-x-1"
            >
              GitHub
            </a>
            <a
              href="mailto:your@email.com"
              class="text-text-secondary no-underline transition-all duration-300 w-fit hover:text-[#667eea] hover:translate-x-1"
            >
              Email
            </a>
          </div>
        </div>
      </div>

      <div
        class="pt-8 border-t border-border-color flex justify-between items-center flex-wrap gap-4 max-md:flex-col max-md:text-center"
      >
        <p class="text-text-secondary text-sm">
          &copy; {{ currentYear }} DHL. All rights reserved.
        </p>
        <p class="text-text-secondary text-sm flex items-center gap-2">
          Made with <span class="text-[#f5576c] animate-pulse">❤️</span> using Nuxt
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup>
const currentYear = new Date().getFullYear()
</script>
